<template>
  <div class="q-pa-md">
    <t-btn-group class="q-mb-md">
      <t-btn color="primary" @click="less">Less</t-btn>
      <t-btn color="secondary" @click="more">More</t-btn>
    </t-btn-group>

    <t-scroll-area :delay="1200" style="height: 200px; max-width: 300px">
      <div v-for="n in number" :key="n">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </t-scroll-area>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const number = ref(4);

      return {
        number,

        less() {
          if (number.value > 1) {
            number.value--;
          }
        },

        more() {
          number.value++;
        },
      };
    },
  };
</script>
